<template>
  <div>
    <h1>hello</h1>
    {{ message }}<br />
    <span v-once>这个将不会改变: {{ message }}</span><br />
    <span v-bind:title="load">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
    <p v-if="seen">现在你看到我了</p>
    <ol>
      <li v-for="e in list" v-bind:key="e.text">
        {{ e.text }}
      </li>
    </ol>
    <p>
      <button v-bind:disabled="isButtonDisabled" v-on:click="reverseMessage">反转消息</button>
      <button v-on:click="reverseSeen">隐藏消息</button><br />
      消息：<input v-model="message">
    </p>
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <p>
      <button v-on:click="revButton">{{ isButtonDisabled ? "启用反转" : "禁用反转" }}</button>
    </p>
    <p>
      <a v-bind:href="url">访问主页</a><br />
      主页：<input v-model="url">
    </p>
    <p>
      计算属性<br />
      Computed reversed message: "{{ reversedMessage }}"
    </p>
  </div>
</template>

<script>
export default {
  name: "hello.vue",
  data: () => {
    return {
      message: 'Hello fkxxyz!',
      load: '页面加载于 ' + new Date().toLocaleString(),
      seen: false,
      list: [
        {text: "hello fkxxyz 1"},
        {text: "hello fkxxyz 2"},
        {text: "hello fkxxyz 3"},
      ],
      rawHtml: "<h2>Hi</h2>",
      isButtonDisabled: false,
      url: "https://www.fkxxyz.com"
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    },
    reverseSeen: function () {
      this.seen = !this.seen
    },
    revButton: function () {
      this.isButtonDisabled = !this.isButtonDisabled
    }
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

<style scoped>

</style>